import { type FeatureGroup } from "@/base-framework/types/landing";

export default function Features({ groups }: { groups: FeatureGroup[] }) {
  if (!groups?.length) return null;
  return (
    <section id="features" aria-labelledby="features-title" className="w-full">
      <div className="mx-auto max-w-screen-xl px-6 py-16">
        <h2 id="features-title" className="text-2xl md:text-3xl font-semibold mb-8">
          Product Features
        </h2>
        <div className="grid gap-8">
          {groups.map((g, gi) => (
            <article key={gi} className="rounded-2xl border border-black/10 dark:border-white/15 p-6">
              <h3 className="text-xl font-semibold mb-4">{g.title}</h3>
              <ul role="list" className="grid sm:grid-cols-2 gap-4">
                {g.items.map((it, ii) => (
                  <li key={ii} className="">
                    <div className="text-base font-medium">{it.title}</div>
                    <div className="text-sm text-foreground/80">{it.desc}</div>
                    {it.metric && (
                      <div className="text-xs text-foreground/70 mt-1">{it.metric}</div>
                    )}
                  </li>
                ))}
              </ul>
            </article>
          ))}
        </div>
      </div>
    </section>
  );
}

